import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Form } from 'antd';
import MqttEncoderForm from './components/encoder';
import MqttDecoderForm from './components/decoder';

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
@Form.create()
class MqttProtocol extends PureComponent {
  componentDidMount() {
    const { dispatch, protocolIdParam } = this.props;
    dispatch({
      type: 'product/fetchMqttEncoderProtocol',
      payload: { protocolId: protocolIdParam, type: 1 },
    });
    dispatch({
      type: 'product/fetchMqttDecoderProtocol',
      payload: { protocolId: protocolIdParam, type: 4 },
    });
  }

  render() {
    const {
      protocolIdParam,
      product: { mqttEncoderDetail, mqttDecoderDetail },
    } = this.props;
    console.log(mqttEncoderDetail);
    return (
      <Fragment>
        <MqttEncoderForm param={protocolIdParam} detail={mqttEncoderDetail} />
        <MqttDecoderForm param={protocolIdParam} detail={mqttDecoderDetail} />
      </Fragment>
    );
  }
}
export default MqttProtocol;
